import 'package:flutter/material.dart';

class VerificationCodeWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return VerificationCodeState();
  }
}

class VerificationCodeState extends State<VerificationCodeWidget> {
  TextEditingController _phoneNumberController;
  TextEditingController _verificationCodeController;
  FocusNode _phoneNumberFocusNode = new FocusNode();
  FocusNode _verificationFocusNode = new FocusNode();

  bool _enableVerificationButton = false;

  @override
  void initState() {
    super.initState();
    _phoneNumberController = TextEditingController();
    _verificationCodeController = TextEditingController();
  }

  @override
  void dispose() {
    super.dispose();
    _phoneNumberController.dispose();
    _verificationCodeController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding:
          EdgeInsets.only(top: 20.0, left: 20.0, right: 20.0, bottom: 10.0),
      child: Column(
        children: <Widget>[
          _buildPhoneNumberTextField(),
          Container(height: 16.0),
          _buildVerificationCodeRow(),
          Container(height: 40.0)
        ],
      ),
    );
  }

  Widget _buildPhoneNumberTextField() => TextField(
        decoration: InputDecoration(hintText: '请输入手机号'),
        keyboardType: TextInputType.number,
        controller: _phoneNumberController,
        onChanged: (String inputNumber) {
          setState(() {
            if (inputNumber == null || inputNumber.isEmpty) {
              _enableVerificationButton = false;
            } else {
              _enableVerificationButton = true;
            }
          });
        },
      );

  Widget _buildVerificationCodeTextField() => TextField(
        decoration: InputDecoration(hintText: '请输入验证码'),
        keyboardType: TextInputType.text,
        controller: _verificationCodeController,
      );

  Widget _buildVerificationButton() => FlatButton(
        padding: EdgeInsets.symmetric(horizontal: 0.0),
        child: Text(
          '获取验证码',
          maxLines: 1,
          softWrap: false,
          style: TextStyle(
              color: _enableVerificationButton ? Colors.blue : Colors.grey),
        ),
        onPressed: _enableVerificationButton ? () {} : null,
      );

  Row _buildVerificationCodeRow() => Row(
        children: <Widget>[
          Expanded(
            child: _buildVerificationCodeTextField(),
            flex: 9,
          ),
          Expanded(
            child: Container(
              height: 30.0,
              color: Color.fromARGB(255, 0xdd, 0xdd, 0xdd),
              margin: EdgeInsets.only(
                  left: 10.0, right: 10.0, top: 2.0, bottom: 2.0),
            ),
            flex: 1,
          ),
          Expanded(
            child: _buildVerificationButton(),
            flex: 3,
          )
        ],
      );
}
